<script setup lang="ts">
import { addReOrCatApiFunc, getBrandCategory, getBrandRegion, updateBrand } from '@/api/brand';
import { useBrandStore } from '@/store/brandStore';


const brandStore = useBrandStore()
const brandData = brandStore.editBrandData
const requestRegion = ref(false)
const dialogAdd = ref(false)
const editBrandBut = async () => {
    const ref = await updateBrand(brandData)
    if (ref.code === 200) {
        brandStore.editBrand = false
        await brandStore.getBrandListFunc()
        ElNotification({
            message: '修改成功',
            type: 'success',
        })
    } else {
        ElNotification({
            message: ref.msg,
            type: 'error',
        })
    }
}
const addRegionOrCategory = () => {
    dialogAdd.value = true
}
const addReOrCatData = reactive({
    type: '',
    name: '',
})
const addReOrCatFun = async () => {
    const res = await addReOrCatApiFunc(addReOrCatData)
    if (res.code === 200) {
        if (addReOrCatData.type === 'region') {
            brandStore.regionOptions.push({ name: addReOrCatData.name })
        } else if (addReOrCatData.type === 'category') {
            brandStore.categoryOptions.push({ name: addReOrCatData.name })
        }
        ElNotification({
            message: '添加成功',
            type: 'success',
        })
        dialogAdd.value = false
    } else {
        ElNotification({
            message: res.msg,
            type: 'error',
        })
    }
}
onBeforeMount(async () => {
    if (brandStore.regionOptions.length === 0) {
        requestRegion.value = true
        const res = await getBrandRegion()
        if (res.code === 200) {
            requestRegion.value = false
            brandStore.regionOptions.push(...res.data.map(name => ({ name })))
        } else {
            requestRegion.value = false
            console.log(res.msg)
        }
    }
    if (brandStore.categoryOptions.length === 0) {
        const res = await getBrandCategory()
        if (res.code === 200) {
            brandStore.categoryOptions.push(...res.data.map(name => ({ name })))
        } else {
            console.log(res.msg)
        }
    }
})
</script>

<template>
    <div>
        <el-drawer v-model="brandStore.editBrand" title="新增品牌" size="35%">
            <el-form :model="brandData" label-width="auto">
                <el-form-item label="品牌名称">
                    <el-input v-model="brandData.name"></el-input>
                </el-form-item>
                <el-form-item label="品牌logo">
                    <el-input v-model="brandData.logo"></el-input>
                </el-form-item>
                <el-form-item label="品牌描述">
                    <el-input v-model="brandData.description"></el-input>
                </el-form-item>
                <el-form-item label="所属地区">
                    <el-select v-model="brandData.region" placeholder="请选择" :loading="requestRegion" filterable
                        clearable>
                        <el-option v-for="item in brandStore.regionOptions" :key="item.name" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属类别">
                    <el-select v-model="brandData.category" placeholder="请选择" :loading="requestRegion" filterable
                        clearable>
                        <el-option v-for="item in brandStore.categoryOptions" :key="item.name" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="brandData.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="addRegionOrCategory">添加地区/类别</el-button>

                </el-form-item>
            </el-form>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="brandStore.editBrand = false">取消</el-button>
                    <el-button type="primary" @click="editBrandBut">确定</el-button>
                </div>
            </template>
        </el-drawer>
        <el-dialog v-model="dialogAdd" title="添加地区/类别" width="500">
            <el-form :model="addReOrCatData" label-width="auto">
                <el-form-item label="添加类别">
                    <el-select v-model="addReOrCatData.type" placeholder="">
                        <el-option label="地区" value="region" />
                        <el-option label="类别" value="category" />
                    </el-select>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="addReOrCatData.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogAdd = false">取消</el-button>
                    <el-button type="primary" @click="addReOrCatFun">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped></style>